import { StyleSheet } from 'react-native';
import { phonePx } from '../../../../util/adapt';
import {
  APP_BLACK,
  APP_SECOND_GREY,
  BORDER_GREY,
  APP_BLUE,
  APP_GRAY,
  APP_RED
} from '../../../../constant/color';

export default StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    marginBottom: phonePx(12),
    paddingHorizontal: phonePx(14)
  },
  content: {
    height: phonePx(102),
    paddingHorizontal: phonePx(16),
    backgroundColor: '#fff',
    borderRadius: phonePx(4)
  },
  desc: {
    marginTop: phonePx(12),
    fontSize: phonePx(16),
    color: APP_BLACK,
    fontWeight: '600',
    lineHeight: phonePx(22)
  },
  title: {
    marginTop: phonePx(5),
    fontSize: phonePx(12),
    color: APP_GRAY,
    lineHeight: phonePx(16)
  },
  info: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    marginTop: phonePx(10)
  },
  status: {
    fontSize: phonePx(10),
    color: APP_SECOND_GREY,
    lineHeight: phonePx(14)
  },
  loadProgress: {
    height: phonePx(2),
    marginTop: phonePx(8),
    backgroundColor: BORDER_GREY
  },
  progress: {
    position: 'absolute',
    height: phonePx(2),
    backgroundColor: APP_BLUE
  },
  dot: {
    position: 'absolute',
    top: phonePx(13),
    right: phonePx(15),
    height: phonePx(20),
    paddingHorizontal: phonePx(6),
    backgroundColor: APP_RED,
    borderRadius: phonePx(10),
    alignItems: 'center',
    justifyContent: 'center'
  },
  dotDesc: {
    fontSize: phonePx(14),
    color: '#ffffff',
    fontWeight: '500',
    lineHeight: phonePx(16),
    height: phonePx(16)
  },
  selectedBox: {
    justifyContent: 'center',
    alignItems: 'center',
    width: phonePx(20),
    height: phonePx(20),
    backgroundColor: '#fff',
    borderRadius: phonePx(6)
  },
  selectedIcon: {
    width: phonePx(11),
    height: phonePx(8)
  }
});
